<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  
<style>


</style>

<script>
    $(function() {
      $.ajaxSettings.async = false;
        $.post("http://localhost:9099/zhiyinGame/getMapInfo", function(data){
            var result = JSON.parse(data);
            var mapInfo = result.mapInfo;
            var police = result.police;
            var thief = result.thief;
            var map = "<table>";
            for(var i in mapInfo){
              map += '<tr>';
              for(var j in mapInfo[i]){
                var grid = mapInfo[j][i];

                var style = "";
                var text = "";
                if(grid.topWall){
                  style += "border-top: 1px solid black;";
                }
                if(grid.bottomWall){
                  style += "border-bottom: 1px solid black;";
                }
                if(grid.leftWall){
                  style += "border-left: 1px solid black;";
                }
                if(grid.rightWall){
                  style += "border-right: 1px solid black;";
                }
                if(grid.mark>0){
                  style += "background: yellow";
                  // text += "score:"+grid.mark;
                }
                if(police.x == i && police.y == j){
                  style += "background: blue";
                }
                if(thief.x == i && thief.y == j){
                  style += "background: red";
                }
                if(grid.step==5){
                  text += "step:" + grid.step;
                }
                map += "<td style='width: 70px;height:70px;"+style+"'>"+text+"</td>";
              }
              map += '</tr>';
            }
            map += '</table>';
            $("#mainpanel").append(map);
        })


        
    })

</script>
</head>
<body>
    <div id="mainpanel"></div>
</body>
</html>